<script>

import {
  getEdmitEvaluation, getEvaluationEdmitsubmit,
  getEvaluationSettings,
  getPromptContent,
  getsetAdd
} from "@/api/tool/scheduling/setEvaluation";

export default ({
  name: "setupmgnt",
  data() {
    return {
      // 分页参数
      query:
        {
          pageNum: 1,
          pageSize: 10,
          assessmentId: this.$route.query.id
        }
      ,
      // 表格渲染数据
      total: '',
      arr: [],
      tableList: [],
      //   添加弹框
      dialogVisible: false,
      text: '',
      scoreList: {
        scoreA: '',
        scoreB: '',
      },
      //添加传参
      addQuery: {
        assessmentId: this.$route.query.id,
        analysis: "",
        lowest: 0,
        highest: 0
      },
      //   编辑弹框
      dialogEdmitVisible: false,
      edmitList: {
        lowest: '',
        highest: '',
        analysis: '',
        id: ''
      },


    }
  },
  methods: {
    load() {
      //     数据渲染
      getEvaluationSettings({assessmentId: this.$route.query.id, pageNum: 1, pageSize: 10}).then(res => {
        // console.log(res)
        this.arr = res.rows
        this.total = res.total
        this.tableList = []
        this.arr.forEach(item => {
          this.tableList.push({id: `${item.id}`, content: `${item.analysis}`, range: `${item.lowest}-${item.highest}`})
        })

      })
    },
    // 删除
    del(row) {
      // console.log(row)
      this.$confirm('此操作将永久删除该测评信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getPromptContent(row.id).then(res => {
          // console.log(res)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.load()

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
      this.load()
    },
    //分页方法
    handleCurrentChange(val) {
      // console.log(val)
      this.query.pageNum = val

      getEvaluationSettings(this.$route.query.id).then(res => {
        // this.tableList = res.rows
        // console.log(res)
      })
    },
    //   弹框关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //   分数增加
    scoreAdd() {
      this.scoreList.scoreA++
    },
    edmitAdd() {
      this.edmitList.lowest++
    },
    scoreAddB() {
      this.scoreList.scoreB++
    },
    edmitAddB() {
      this.edmitList.highest++
    },

    //   分数减少
    scoreReduce() {
      if (this.scoreList.scoreA > 0) {
        this.scoreList.scoreA--
      }
    },
    edmitReduce() {
      if (this.edmitList.lowest > 0) {
        this.edmitList.lowest--
      }
    },
    scoreReduceB() {
      if (this.scoreList.scoreB > 0) {
        this.scoreList.scoreB--
      }
    },
    edmitReduceB() {
      if (this.edmitList.highest > 0) {
        this.edmitList.highest--
      }
    },
    //   确认添加
    save() {
      this.dialogVisible = false
      this.addQuery.assessmentId = this.$route.query.id
      this.addQuery.analysis = this.scoreList.analysis
      this.addQuery.lowest = this.scoreList.scoreA
      this.addQuery.highest = this.scoreList.scoreB
      // console.log(this.addQuery)
      if (this.addQuery.highest > this.addQuery.lowest) {
        getsetAdd(this.addQuery).then(res => {
          // console.log(res)
        })


      } else {
        this.addQuery = {
          assessmentId: this.$route.query.id,
          analysis: "",
          lowest: 0,
          highest: 0
        }
        this.$message({
          type: 'error',
          message: '最大值必须大于最小值'
        });
      }
      this.load()

    },
    // 编辑
    edmit(row) {
      // console.log(row)
      this.dialogEdmitVisible = true
      getEdmitEvaluation(row.id).then(res => {
        // console.log(res)
        this.edmitList.lowest = res.data.lowest
        this.edmitList.highest = res.data.highest
        this.edmitList.analysis = res.data.analysis
        this.edmitList.id = res.data.id

      })

    },
    //   确认提交
    edmitSubmit() {
      this.dialogEdmitVisible = false
      getEvaluationEdmitsubmit(this.edmitList).then(res => {
        // console.log(res)
      })
      this.load()
    },

  },
  created() {
    this.load()
  }

})
</script>

<template>
  <div class="body">
    <!--    添加按钮      -->
    <div>
      <el-button type="primary" @click="dialogVisible = true" style="margin-bottom: 20px">添加</el-button>
    </div>
    <!--    表格主体-->
    <div class="table">
      <el-table
        :data="tableList"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="content"
          label="提示内容"
          width="550">
        </el-table-column>
        <el-table-column
          prop="range"
          label="分数范围"
          width="440">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="170">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edmit(scope.row)">编辑</el-button>
            <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页     -->
    <div class="pag-btn" style="margin-top: 30px;float: right">
      <el-pagination
        :total="Number(total)"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!--    添加弹框    -->
    <div>
      <el-dialog
        title="添加"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <!--        添加框主体区域     -->
        <div class="box">
          <p>分数范围</p>
          <div class="scoreBox">
            <div class="form-item-left">
              <el-input v-model="scoreList.scoreA" placeholder="0" style="width: 150px"></el-input>
              <span role="button" class="increase" @click="scoreAdd">
                      <i class="arrow-up"><img src="../../../assets/images/xiangshangjiantou.png" alt=""></i>
              </span>
              <span role="button" class="increaseDown" @click="scoreReduce">
                      <i class="arrow-down"><img src="../../../assets/images/xiangxiajiantou.png" alt=""></i>
              </span>
            </div>
            <p>~</p>
            <div class="form-item-right">
              <el-input v-model="scoreList.scoreB" placeholder="0" style="width: 150px"></el-input>
              <span role="button" class="increase" @click="scoreAddB">
                      <i class="arrow-up"><img src="../../../assets/images/xiangshangjiantou.png" alt=""></i>
              </span>
              <span role="button" class="increaseDown" @click="scoreReduceB">
                      <i class="arrow-down"><img src="../../../assets/images/xiangxiajiantou.png" alt=""></i>
              </span>
            </div>
          </div>
          <p>内容信息</p>
          <div class="biginput">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="scoreList.analysis"
              maxlength="500"
              show-word-limit
            >
            </el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--    编辑弹框     -->
    <div>
      <el-dialog
        title="编辑"
        :visible.sync="dialogEdmitVisible"
        width="30%"
        :before-close="handleClose">
        <!--        添加框主体区域     -->
        <div class="box">
          <p>分数范围</p>
          <div class="scoreBox">
            <div class="form-item-left">
              <el-input v-model="edmitList.lowest" placeholder="0" style="width: 150px"></el-input>
              <span role="button" class="increase" @click="edmitAdd">
                      <i class="arrow-up"><img src="../../../assets/images/xiangshangjiantou.png" alt=""></i>
              </span>
              <span role="button" class="increaseDown" @click="edmitReduce">
                      <i class="arrow-down"><img src="../../../assets/images/xiangxiajiantou.png" alt=""></i>
              </span>
            </div>
            <p>~</p>
            <div class="form-item-right">
              <el-input v-model="edmitList.highest" placeholder="0" style="width: 150px"></el-input>
              <span role="button" class="increase" @click="edmitAddB">
                      <i class="arrow-up"><img src="../../../assets/images/xiangshangjiantou.png" alt=""></i>
              </span>
              <span role="button" class="increaseDown" @click="edmitReduceB">
                      <i class="arrow-down"><img src="../../../assets/images/xiangxiajiantou.png" alt=""></i>
              </span>
            </div>
          </div>
          <p>内容信息</p>
          <div class="biginput">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="edmitList.analysis"
              maxlength="500"
              show-word-limit
            >
            </el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogEdmitVisible = false">取 消</el-button>
          <el-button type="primary" @click="edmitSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>


  </div>
</template>

<style scoped lang="scss">
.body {
  padding: 20px;

  .box {
    padding: 15px;

    .scoreBox {
      display: flex;

      .form-item-right {
        margin-left: 25px;
      }

      p {
        color: #101010;
        font-size: 16px;
        display: block;
        font-weight: 400;
      }

    }

  }
}
//表格居中
::v-deep .table {
  .el-table__cell:first-child .cell {
    text-align: center;
  }
  .el-table__cell:nth-of-type(2) .cell {
    text-align: center;
  }
}
//分页
.pag-btn {
  top: 550px;
  bottom: 10px;
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  position: absolute;
  font-weight: bold;
  right: 20px;
}
::v-deep .biginput .el-textarea__inner {
  width: 757px;
  height: 311px;
}

//添加弹出框
::v-deep .el-dialog {
  width: 829px !important;
}

::v-deep .el-dialog__header {
  padding: 20px;
  padding-bottom: 10px;
  background-color: #1892ff;
}

::v-deep .el-dialog__title {
  color: white;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

::v-deep .el-input--medium .el-input__inner {
  height: 36px;
  width: 200px;
  line-height: 36px;
}

.increase {
  left: 13px;
  top: -8px;
  position: relative;
  display: inline-block;
  line-height: 17px;
  border-radius: 0 4px 0 0;
  border-bottom: 1px solid #dcdfe6;
  width: 36px;
  height: 16.8px;
  font-size: 14px;
  background: #f5f7fa;
  border-left: 1px solid #dcdfe6;
  text-align: center;

  img {
    width: 10px;
    height: 10px;
  }
}

.increaseDown {
  left: -23px;
  top: 9px;
  position: relative;
  display: inline-block;
  line-height: 17px;
  border-radius: 0 4px 0 0;
  border-bottom: 1px solid #dcdfe6;
  width: 36px;
  height: 16.8px;
  font-size: 14px;
  background: #f5f7fa;
  border-left: 1px solid #dcdfe6;
  text-align: center;

  img {
    width: 10px;
    height: 10px;
  }
}

::v-deep .el-input--medium .el-input__inner {
  height: 36px;
  width: 200px;
  line-height: 36px;
  text-align: center;
}

</style>
